<template>
	<view class="person_add">
		<view class="main">
			<view class="input">
				<view class="left">收货人</view>
				<view class="right">
					<u-input v-model="name" type="text" :clearable='false' placeholder='请输入收货人' />
				</view>
			</view>
			<view class="input">
				<view class="left">手机号码</view>
				<view class="right">
					<u-input v-model="phone" type="text" :clearable='false' placeholder='请输入手机号码' />
				</view>
			</view>
			<view class="input">
				<view class="left">所在地区</view>
				<view class="right">
					<view class="right_text" @click="show=true">
						<view class="r_txt" :class="areaCode.length?'r_txt_color':''">{{region}}</view>
						<u-icon name="arrow-right" color="#bbb" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="input">
				<view class="left" style="width: 195rpx;">详细地址</view>
				<view class="right_text">
					<u-input v-model="address" :clearable='false' type="textarea" height='200' />
				</view>
			</view>
			<view class="input">
				<view class="left">设为默认地址</view>
				<view class="right_switch">
					<u-switch v-model="checked" active-color="#26C281" :size='30'></u-switch>
				</view>
			</view>
		</view>
		<!-- 选择地区 -->
		<u-picker mode="region" v-model="show" confirm-color='#26C281' :area-code='areaCode' @confirm='confirmBtn'></u-picker>
		<!-- 底部 -->
		<BottomBtn title='保存' @submit='submitBtn'></BottomBtn>
	</view>
</template>

<script>
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				id:'',
				name:'',
				phone:'',
				region:'请选择省市区',
				address:'',
				checked:false,
				// 
				show:false,
				areaCode:[],
			};
		},
		onLoad(opt) {
			if(opt.info){
				var info = JSON.parse(opt.info)
				this.id=info.id
				this.name=info.username
				this.phone=info.mobile
				this.region=info.area
				this.address=info.address
				this.checked=info.status==2?true:false
				this.areaCode=info.code.split(',')
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
			}else if(opt.type==2){
				uni.setNavigationBarTitle({
					title: '添加地址'
				})
			}
		},
		methods:{
			// 底部按钮
			submitBtn(){
				var that = this
				if(that.name==''){
					that.$tips.showToast('请输入收货人')
					return
				}else if(that.phone=='' || !that.$test.phoneTrue(that.phone)){
					that.$tips.showToast('请输入正确的手机号')
					return
				}else if(that.areaCode.length==0){
					that.$tips.showToast('请选择省市区')
					return
				}else if(that.address==''){
					that.$tips.showToast('请输入详细地址')
					return
				}else if(that.id){
					that.$tips.showLoading('编辑中')
					var params = {
						id:that.id,
						mobile:that.phone,
						area:that.region,
						username:that.name,
						status:that.checked?2:1,
						address:that.address,
						code:that.areaCode.join(','),
					}
					that.$httpApi.addressSave(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('编辑成功')
							setTimeout(function(){
								uni.navigateBack()
							},2000)
						}
					})
				}else {
					that.$tips.showLoading('添加中')
					var params = {
						mobile:that.phone,
						area:that.region,
						username:that.name,
						status:that.checked?2:1,
						address:that.address,
						code:that.areaCode.join(','),
					}
					that.$httpApi.addressAdd(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('添加成功')
							setTimeout(function(){
								uni.navigateBack()
							},2000)
						}
					})
				}
			},
			// 选择地址
			confirmBtn(val){
				this.region=val.province.label+''+val.city.label+''+val.area.label
				this.areaCode=[val.province.value,val.city.value,val.area.value]
			},
		}
	}
</script>

<style lang="less">
	.person_add{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 20rpx 32rpx;
			background: #fff;
			.input{
				width: 100%;
				padding: 15rpx 0;
				display: flex;
				.left{
					width: 200rpx;
					line-height: 70rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					u-input{
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.right_text{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.r_txt{
							font-size: 28rpx;
							font-weight: 500;
							color: rgb(192, 196, 204);
						}
						.r_txt_color{
							color: #222222;
						}
					}
				}
				.right_text{
					width: calc(100% - 195rpx);
					.u-input__textarea{
						width: 100%;
						font-size: 28rpx;
						font-weight: 500;
						color: #222222;
					}
				}
				.right_switch{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
</style>
